<template>
  <div class="projectDetailWrapper"  v-cloak>
    <div class="projectDetailContent">
      <div class="topBox">
        <div
          class="img"
          :style="{ backgroundImage: `url(${currentData?.coverImgUrl})` }"
        ></div>
        <div class="info">
          <div class="title">
            {{ currentData.name || '' }}
            <!-- <div class="status">招募中</div> -->
          </div>
          <div class="describe" v-html="renderMarkDown(currentData.describe || '')"></div>
          <!-- <div class="customBtn" @click="handleClick">
						<img src="@/assets/link.png" alt="">
						项目链接
					</div> -->
        </div>
      </div>
      <div class="content">
				<div class="subTitle">
						<img src="@/assets/titleIcon.png" :alt="t('projectDetail','项目图片')" />
						{{t('projectDetail','项目成员')}}
				</div>
				<div class="teacherBox">
					<div class="teacherItem">
						<img src="@/assets/user.png" alt="项目图片" />
						<div style="font-size:14px">
							<div>{{ t('projectPositions','最多招募') }}：{{currentData.totalMemberLimit}} {{ t('projectPositions','人') }}</div>
						  <div style="margin-top: 8px;">{{ t('projectPositions','待招') }}：<span style="color: #ff6d6d;">{{currentData?.totalMemberLimit - currentData?.studentList?.length || 0}}</span> {{ t('projectPositions','人') }}</div>
						</div>
					</div>
				</div>
        <div class="subTitle">
            <img src="@/assets/titleIcon.png" alt="" />
            {{t('projectDetail','主指导老师')}}
          </div>
          <div class="teacherBox">
            <div class="teacherItem">
              <img src="@/assets/user.png" alt="头像" />
              <div>
                <div>{{ currentData?.mainTeacher?.teacherName }}</div>
              </div>
            </div>
          </div>
          <div class="subTitle" v-if="currentData?.coTeacherList?.length">
            <img src="@/assets/titleIcon.png" alt="" />
            {{t('projectDetail','副指导老师')}}
          </div>
          <div class="teacherBox">
            <div
              class="teacherItem"
              v-for="item in currentData?.coTeacherList"
              :key="item.id"
            >
              <img src="@/assets/user.png" alt="头像" />
              <div>
                <div>{{ item.teacherName }}</div>
                <!-- <div style="margin-top: 10px;">教师技能</div> -->
              </div>
            </div>
          </div>
        <div class="subTitle">
          <img src="@/assets/titleIcon.png" alt="" />
          {{t('projectDetail','详细信息')}}
        </div>
        <div class="group">
          <div class="item">
            <div class="cell">
              <div class="label">{{t('projectDetail','所属年级')}}</div>
              <div class="value">{{ currentData.grade || t('common','暂无') }}</div>
            </div>
            <div class="cell">
              <div class="label">{{t('projectDetail','所属班级')}}</div>
              <div class="value">{{ formatClass(currentData.gradeClassList) || t('common','暂无') }}</div>
            </div>
            <div class="cell">
              <div class="label">{{t('projectDetail','成员总数')}}</div>
              <div class="value">{{ currentData.totalMemberLimit|| t('common','暂无') }}</div>
            </div>
            <!-- <div class="cell">
							<div class="label">项目难度</div>
							<div class="value"> <a-rate :value="2" disabled  style="font-size: 14px;"/></div>
						</div> -->
            <!-- <div class="cell">
							<div class="label">项目类型</div>
							<div class="value">商业项目</div>
						</div>
						<div class="cell">
							<div class="label">项目报名类型</div>
							<div class="value">暂无</div>
						</div> -->
          </div>
          <!-- <div class="item">
            <div class="cell">
              <div class="label">开发模型</div>
              <div class="value">{{ currentData.agentName }}</div>
            </div>
          </div> -->
          <div class="item">
            <div class="cell">
              <div class="label">{{t('projectDetail','评分标准')}}</div>
              <div class="value">{{ currentData.scoreStandard|| t('common','暂无') }}</div>
            </div>
          </div>
          <div class="item">
            <div class="cell">
              <div class="label">{{t('projectDetail','项目目标')}}</div>
							<div class="value"><div v-html="renderMarkDown(currentData.target || t('common','暂无'))"></div></div>
              <!-- <div class="value">{{ currentData.target }}</div> -->
            </div>
          </div>

        </div>
				
      </div>
    </div>
    <div class="buttonGroup">
      <div class="button" @click="handleClick({name: '加入项目'})" v-if="isJonined && hasJoined() && !isTeacher()"> {{t('projectDetail','加入项目')}} </div>
      <div class="button" @click="handleClick({name:'编辑'})" v-if="isTeacher() && !pojectInfo.from"> {{t('common','编辑')}} </div>
      <div class="button" @click="handleClick({name: '上传相关资料'})" v-if="isTeacher() && !pojectInfo.from"> {{t('projectDetail','上传相关资料')}} </div>
    </div>
		<a-modal class="modal" :maskClosable="false" width="800px" v-model:open="modal.visible" :footer="null" v-if="modal.visible">
			<minAi style="height: 600px;" :url="`/ai/dify/learning/${currentData.agentId}/chatMessages`" :inputs="{userId: `student_${state.userInfo.id}`, projectId: pojectInfo.id}" :initialData="modal.initialData" />
		</a-modal>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, onMounted, computed, inject, watch } from 'vue'
import { state, isTeacher } from '@/stores/info'
import minAi from '@/components/common/minAi.vue'
import { t } from '@/i18n'
import MarkdownIt from 'markdown-it'
const renderMarkDown = (text) => {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  })
  return md.render(text).replace(/<a\s+[^>]*?(?!target=)([^>]*>)/g, function(match, p1) {
    return `<a target="_blank" ${p1}`;
  })
}

const modal = reactive({ visible: false, formDisable: false, name: '', initialData: { message: t('projectDetail','我想了解一下这个项目') } })
let pojectInfo = JSON.parse(sessionStorage.getItem('pojectInfo') || '{}')
console.log(pojectInfo, 'pojectInfo')
const messageList = ref([])
const { currentData } = defineProps({
  currentData: { type: Object, default: {} },
})

const editFlag = () => {
  return new Date(currentData.startTime) < new Date()
}
const formatCourse = (courseList) => {
  if (!courseList) return ''
  return courseList.map((item) => item.courseName).join('，')
}
const formatClass = (gradeClassList) => {
  if (!gradeClassList) return ''
  return gradeClassList.map((item) => item.gradeClassName).join('，')
}
const isJonined = ref(false)
const hasJoined = () => {
	if (!currentData?.studentList?.length) return true
  for (let i of currentData?.studentList) if (i.studentId === state.userInfo.id) return false
  return true
}
const emit = defineEmits()

const handleClick = ({name}) => {
	switch (name) {
		case '加入项目':
			modal.visible = true
			break
		default:
      emit('handleClick', {name, item: currentData})
			break
	}
}
onMounted(() => {
  setTimeout(() => {
    isJonined.value = hasJoined()
  }, 100)
})
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";

* {
  box-sizing: border-box;
  /* min-height: 0;
	min-width: 0; */
}
.projectDetailWrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
}
.projectDetailContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  /* padding: 20px; */
  color: #333;
  background: #ffffff;
  border-radius: 10px;
  overflow-y: auto;
  .topBox {
    padding: 20px 20px 0 20px;
    display: flex;
    width: 100%;
    min-height: 208px;
    .img {
      width: 360px;
      max-height: 210px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f5f5f5;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 24px;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
      height: 210px;
      .title {
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
          padding: 7px 13px;
          background: #f1bf46;
          border-radius: 13px;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          margin-left: 12px;
        }
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 1.5;
        word-break: break-all;
        overflow: auto;
        // background-color: #6d68ee;
        // @include hoverShowScrollBar();

      }
      .customBtn {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 5px 8px;
        font-weight: 400;
        font-size: 14px;
        color: #6d68ee;
        background: #eeeeff;
        border-radius: 4px;
        img {
          margin-right: 6px;
          height: 10px;
        }
      }
    }
  }
  .content {
		height: auto;
    min-height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    .subTitle {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      img {
        width: 14px;
        margin-right: 8px;
      }
    }
    .teacherBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .teacherItem {
        width: 200px;

        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding: 12px;
        img {
          width: 45px;
          margin-right: 10px;
        }
      }
    }
    .group {
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        width: 100%;
        padding: 17px 27px;
        margin-bottom: 16px;
        background: #f7f7ff;
        border-radius: 8px;
        .cell {
          display: flex;
          flex-direction: column;
          min-width: 20%;
					padding: 0 5px;
          .label {
            font-weight: 500;
            font-size: 14px;
            color: rgba(119, 106, 156, 0.85);
          }
          .value {
            font-weight: 500;
            margin-top: 6px;
						font-weight: 500;
						font-size: 16px;
						color: rgba(0,0,0,0.85);
						line-height: 1.5;
          }
        }
      }
    }
  }
}
.buttonGroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .button {
    min-width: 150px;
    max-width: 160px;
    /* word-break: break-all; */
    padding: 8px 12px;
    background: #8466f5;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: wrap;
    &:hover {
      background: white;
      color: #8466f5;
    }
  }
}


</style>
<style lang="scss">
[v-cloak] { display: none; }

.modal {
	.ant-modal-content {
		padding: 0 !important;
	}
}
</style>